// pages/divination/divination.js
var v3 = require("../../utils/vector3.js")
let app = getApp()
let timer = null
Page({

  /**
   * 页面的初始数据
   */
  data: {
    angle: 0,
    touch_point: null,
    center: null,
    transition: "none",
    index: 0,
    isGuideShow: true,
    animationData: {},
    category: []

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    wx.showLoading({
      title: '请稍候',
      mask: true
    })
    app.request("get_categories", {}, true).then((data) => {
      console.log(data)
      this.setData({
        category: data.category
      })
    })
  },
  touch_start: function (e) {
    console.log("start")
    this.setData({
      transition: "none"
    })
    let v = new v3.Vector3(e.touches[0].clientX, e.touches[0].clientY, 0)
    this.setData({
      touch_point: v
    })
    this.data.touch_point = new v3.Vector3(e.touches[0].clientX, e.touches[0].clientY, 0);
  },
  touch_move: function (e) {
    let that = this
    let first_point = this.data.touch_point;
    let cur_point = new v3.Vector3(e.touches[0].clientX, e.touches[0].clientY, 0);
    let cur_angle = this.data.angle

    let v_start = first_point.subtract(this.data.center)
    let v_end = cur_point.subtract(this.data.center)
    let angle = v_start.angle2(v_end)
    that.setData({
      angle: angle + cur_angle
    })
    console.log(this.data.angle)

    that.data.touch_point = cur_point
  },
  touch_end: function (e) {
    let nowAngle = this.data.angle
    let curAngle = this.data.angle % 360
    curAngle < 0 ? curAngle = curAngle + 360 : null
    curAngle = 360 - curAngle
    let xInt = Math.floor(curAngle / 20) //xInt为哪个卦
    // console.log(curAngle)
    let x = curAngle % 20
    // console.log(x)    
    this.setData({
      transition: "all 0.5s ease"
    })
    if (x <= 10) {
      this.setData({
        angle: nowAngle + (curAngle - 20 * xInt),
        index: xInt === 18 ? 0 : xInt
      })
      setTimeout(() => {
        this.setData({
          transition: "none"
        })
      }, 500)
    } else {
      this.setData({
        angle: nowAngle - (20 * (xInt + 1) - curAngle),
        index: (xInt + 1 === 18) ? 0 : xInt + 1
      })
      setTimeout(() => {
        this.setData({
          transition: "none"
        })
      }, 500)
    }
  },
  divinationProcess() {
    console.log("点击")
    
    let category = this.data.category
    let index = this.data.index
    wx.navigateTo({
      url: `divination-process/divination-process?name=${category[index].cat_name}&id=${category[index].cat_id}&price=${category[index].cat_price}&unlock=${category[index].unlock}`
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onShow() {
    timer = setTimeout(() => {
      wx.setNavigationBarTitle({
        title: '每日一卦'
      })
    }, 50)
    wx.hideLoading()
    app.request("get_categories", {}, true).then((data) => {
      console.log(data)
      this.setData({
        category: data.category
      })
     
    })
  },
  onHide() {
    this.setData({
      isGuideShow:false
    })
    clearTimeout(timer)
  },
  onReady: function () {
      wx.setNavigationBarTitle({
        title: '每日一卦'
      })
    wx.createSelectorQuery().select('.divination').boundingClientRect((rect) => {
      this.setData({
        center: new v3.Vector3((rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2, 0)
      })
    }).exec()
    this.show()    
    // this.showGuide()
    // 创建引导动画
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    this.animation = animation

  },
  fade() {
    if(this.data.isAnimation) return false;
    this.setData({
      isAnimation: true
    })
    clearTimeout(timer)
    this.animation.opacity(0).step()
    this.setData({
      animationData: this.animation.export()
    })
    console.log(111)
    timer = setTimeout(() => {
      this.setData({
        isGuideShow: false,
        isAnimation: false
      })
    }, 800)
  },
  show() {
    // this.animation.step()
    this.setData({
      animationData: ""
    })
    this.setData({
      isGuideShow: true
    })
    timer = setTimeout(() => {
      this.fade()
    },2500)
  },
  onShareAppMessage: function (res) {
    return {
      title: '每日一卦',
      path: '/pages/divination/divination',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  }
})